import React from 'react';
import ThemeItem from './Item';
import { WeaSelect, WeaHelpfulTip, WeaLocaleProvider } from 'ecCom';
import {Col, Row} from "antd";
import ColorPicker from 'rc-color-picker';
import {shadowOpts, visbleType, visibleOpts} from "../../../../../../constants/theme";
const getLabel = WeaLocaleProvider.getLabel;

const borderOpts = () => {
  return [
    { key: '0', selected: false, showname: getLabel('511807','无') },
    { key: '1', selected: false, showname: '1' },
    { key: '2', selected: false, showname: '2' },
    { key: '3', selected: false, showname: '3' },
    { key: '4', selected: false, showname: '4' },
    { key: '5', selected: false, showname: '5' }
  ]
};

const mFullWidth = () => {
  return [
    { key: '0', selected: false, showname: getLabel('511808','边缘缩进') },
    { key: '1', selected: false, showname: getLabel('511809','全屏展示') }
  ]
};

export default class ThemeFormSetting extends React.Component {
  formatVisible = visible => {
    return visible == visbleType.Visble;
  }

  render() {
    const { onChange, data } = this.props;

    return (
      <div>
        <h4>{getLabel('511810','表单窗口')}</h4>
        <ThemeItem ecId={`${this && this.props && this.props.ecId || ''}_ThemeItem@1yzg80`} label={getLabel('511783','底色')}>
          <ColorPicker ecId={`${this && this.props && this.props.ecId || ''}_ColorPicker@75ge7c`}
            color={data.css.backgroundColor}
            onChange={onChange('form.css.backgroundColor')}
          />
        </ThemeItem>
        <ThemeItem ecId={`${this && this.props && this.props.ecId || ''}_ThemeItem@1nhuzr`} label={getLabel('511811','手机宽度')}>
          <Row ecId={`${this && this.props && this.props.ecId || ''}_Row@4fb2xl`} style={{ padding: 0 }}>
            <Col ecId={`${this && this.props && this.props.ecId || ''}_Col@hqw6lm`} span={12}>
              <WeaSelect ecId={`${this && this.props && this.props.ecId || ''}_WeaSelect@i5lz6b`}
                value={data.mFullWidth ? '1' : '0'}
                options={mFullWidth()}
                onChange={onChange('form.mFullWidth', this.formatVisible)}
              />
            </Col>
            <Col ecId={`${this && this.props && this.props.ecId || ''}_Col@zl1r5h`}>
              <WeaHelpfulTip ecId={`${this && this.props && this.props.ecId || ''}_WeaHelpfulTip@ccf71n`}
                title={<div>{getLabel('511812','仅用于手机浏览器')}</div>}
                placement="topRight"
                style={{paddingLeft: '5px'}}
              />
            </Col>
          </Row>
        </ThemeItem>
        <ThemeItem ecId={`${this && this.props && this.props.ecId || ''}_ThemeItem@t8v6v9`} label={getLabel('511813','阴影')}>
          <Row ecId={`${this && this.props && this.props.ecId || ''}_Row@3c0pig`} style={{ padding: 0 }}>
            <Col ecId={`${this && this.props && this.props.ecId || ''}_Col@j55xir`} span={8}>
              <WeaSelect ecId={`${this && this.props && this.props.ecId || ''}_WeaSelect@gqrphr`}
                value={data.shadow ? '1' : '0'}
                options={shadowOpts()}
                onChange={onChange('form.shadow', this.formatVisible)}
              />
            </Col>
          </Row>
        </ThemeItem>
        <ThemeItem ecId={`${this && this.props && this.props.ecId || ''}_ThemeItem@98z4w5`} label={getLabel('511814','边框')}>
          <Row ecId={`${this && this.props && this.props.ecId || ''}_Row@hkh3h0`} style={{ padding: 0 }}>
            <Col ecId={`${this && this.props && this.props.ecId || ''}_Col@96d6p7`} span={3}>
              <ColorPicker ecId={`${this && this.props && this.props.ecId || ''}_ColorPicker@5yl5pr`}
                color={data.border.color}
                onChange={onChange('form.border.color')}
              />
            </Col>
            <Col ecId={`${this && this.props && this.props.ecId || ''}_Col@wzuvpr`} span={7} offset={1}>
            <WeaSelect ecId={`${this && this.props && this.props.ecId || ''}_WeaSelect@6ahvrc`}
            value={data.border.width}
            options={borderOpts()}
            onChange={onChange('form.border.width')}
          />
            </Col>
          </Row>
        </ThemeItem>

        <ThemeItem ecId={`${this && this.props && this.props.ecId || ''}_ThemeItem@qks5h1`} label={getLabel('511815','分隔线')}>
          <Row ecId={`${this && this.props && this.props.ecId || ''}_Row@nk07d3`} style={{ padding: 0 }}>
            <Col ecId={`${this && this.props && this.props.ecId || ''}_Col@ac0ggd`} span={3}>
              <ColorPicker ecId={`${this && this.props && this.props.ecId || ''}_ColorPicker@gfuyjs`}
                color={data.divider.color}
                onChange={onChange('form.divider.color')}
              />
            </Col>
            <Col ecId={`${this && this.props && this.props.ecId || ''}_Col@8tkfdo`} span={7} offset={1}>
          <WeaSelect ecId={`${this && this.props && this.props.ecId || ''}_WeaSelect@793uab`}
            value={data.divider.visible ? '1' : '0'}
            options={visibleOpts()}
            onChange={onChange('form.divider.visible', this.formatVisible)}
          />
            </Col>
          </Row>
        </ThemeItem>
      </div>
    )
  }
}